<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for=" (item,index) in e ">{{ index }} {{ item.firstName }} · {{ item.lastName }} +{{item.likeMovie}} </li>
        </ul> 
    </div>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var arr = ['momo', 'yanzi', 'ziwei']
    var obj = {
      'host': 'www.baidu',
      'port': '12345',
      'node': 'selector'
    }

    Mock.mock('http://www.bai.com', {
        'tableData|10': [{
      'firstName|3': 'fei', //重复fei这个字符串 3 次，打印出来就是'feifeifei'。
      'lastName|2-5': 'jiang', //重复jiang这个字符串 2-5 次。
      'big|+1': 0, //属性值自动加 1，初始值为 0
      'age|20-30': 25, //生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型
      'weight|100-120.2-5': 110.24, //生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。
      'likeMovie|1': Boolean, //随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
      'friend1|1': arr, //从数组 arr 中随机选取 1 个元素，作为最终值。
      'friend2|+1': arr, //从属性值 arr 中顺序选取 1 个元素，作为最终值
      'friend3|2-3': arr, //通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。
      'life1|2': obj, //从属性值 obj 中随机选取 2 个属性
      'life1|1-2': obj, //从属性值 obj 中随机选取 1 到 2 个属性。
      'regexp1': /^[a-z][A-Z][0-9]$/, //生成的符合正则表达式的字符串
}]
    })


    var app = new Vue({
  el: '#app',
  data: {
      e:[],
    message: 'Hello Vue!'
  },
  mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
    this.ajsx()
  })
},
methods: {
    ajsx: function () {
        var _this=this
        $.ajax({
      url: 'http://www.bai.com',
      dataType: 'json',
      success: function (e) {
        _this.e=e.tableData
        console.log(_this.e)
      }
    })
    }
  }

  
})
  </script>
  <script>
    // /*模拟删除数据的方式*/
    // var arr = [{
    //     name: 'fei',
    //     age: 20,
    //     id: 1
    //   },
    //   {
    //     name: 'liang',
    //     age: 30,
    //     id: 2
    //   },
    //   {
    //     name: 'jun',
    //     age: 40,
    //     id: 3
    //   },
    //   {
    //     name: 'ming',
    //     age: 50,
    //     id: 4
    //   }
    // ]

    // Mock.mock('http://www.bai1.com', 'delete', function (options) {
    //   var id = parseInt(options.body.split("=")[1]) //获取删除的id
    //   var index;
    //   for (var i in arr) {
    //     if (arr[i].id === id) { //在数组arr里找到这个id
    //       index = i
    //       break;
    //     }
    //   }
    //   arr.splice(index, 1) //把这个id对应的对象从数组里删除
    //   return arr; //返回这个数组,也就是返回处理后的假数据
    // })
    // $.ajax({
    //   url: 'http://www.bai1.com',
    //   type: "DELETE",
    //   data: {
    //     id: 1 //假设需要删除id=1的数据
    //   },
    //   dataType: 'json',
    //   success: function (e) {
    //     console.log(e)
    //   }
    // })

  </script>
</body>

</html>
